<template>
  <div class="content sub-class-set">
    <dc-header :page-to="''" :icon="'icon-header-back'"
               :title="childData.accountFlag === 2 ? '支出子类别设置' : '收入子类别设置'"
               :action-title="'保存'"
               @submit="save">
    </dc-header>
    <div class="head-top mt20">
      <mt-field label="名称" v-model="childData.accountName" :disabled="childData.isDefault === 1"></mt-field>
      <!--<mt-cell title="名称" :value="childData.accountName"></mt-cell>-->
      <div class="mt20">
        <mt-cell>
          <span slot="icon">
            <span>子类别集合</span>
            <span v-if="!edit" class="sub-title ml15">编辑时可删除、拖动</span>
          </span>
          <span class="right-link">
            <span v-if="edit" class="ml15 theme-color" @click="edit=false">编辑</span>
            <span v-if="!edit" class="ml15 theme-color" @click="save()">完成</span>
          </span>
        </mt-cell>
        <div class="card-content mint-cell-wrapper">
          <div class="card-content-inner" style="text-align: left">
            <div v-if="edit" style="width: 100%">
              <div class="tag-inaccess account-child-btn" v-for="item in childList">
                <span>{{item.accountSubName}}</span>
              </div><div @click="addType()" class="tag-inaccess account-child-btn"><i
                class="iconfont icon-hearder-add theme-color"></i><span class="theme-color">新增类别</span></div>
            </div>
            <draggable style="width: 100%" v-if="!edit" v-model="childList" :options="{group:'name'}" :move="getData"
                       @end="drop">
              <div class="tag-inaccess account-child-btn" v-for="item in childList">
                <span>{{item.accountSubName}}</span>
                <i @click="deleteType(item)" v-if="!edit" class="iconfont icon-btn-item-delete btn-del light-red"></i>
              </div>
            </draggable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  import draggable from 'vuedraggable';
  import mintUi from '@/common/mintUi';
  import api from '@/common/api/account';

  export default {
    data () {
      return {
        menuCategory: '2',
        edit: true,
        code: null,
        childData: {},
        childList: []
      };
    },
    created () {
      if (this.$route.params.code) {
        this.code = this.$route.params.code;
      };
      this.getList();
    },
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row,
      draggable
    },
    methods: {
      addType () {
        let msg = this.childData.accountFlag === 2 ? '新增支出子类别' : '新增收入子类别';
        mintUi.openPrompt(msg).then(res => {
          api.addChildAccountType({parentAccountCode: this.code, accountSubName: res}).then(res => {
            mintUi.openToast('新增成功！');
            this.getList();
          });
        });
      },
      getList () {
        api.getChildAccountTypeList(this.code).then(res => {
          this.childData = res;
          this.childList = res.accountSubDTOS;
        });
      },
      deleteType (item) {
        let msg = '删除类别会连同分类下所有历史流水一并删除，为了防止数据丢失，请谨慎确认后再删除？';
        mintUi.openSpeConfirm('删除子类别', msg, true, true, '删除流水和分类', '暂不删除').then(res => {
          api.deleteChildAccountType(item.accountSubCode)
            .then(res => {
              mintUi.openToast('删除成功!');
              this.getList();
            });
        });
      },
      save () {
        if (this.childData.accountName === '') {
          mintUi.openToast('类别名称不能为空！');
        } else {
          this.edit = true;
          let accountSubCodes = [];
          for (let i = 0; i < this.childList.length; i++) {
            accountSubCodes[i] = this.childList[i].accountSubCode;
          }
          ;
          let param = {
            accountCode: this.code,
            accountName: this.childData.accountName,
            accountSubCodes: accountSubCodes
          };
          api.updateChildAccountType(param).then(res => {
            this.getList();
            mintUi.openToast('保存成功！');
          });
        }
        ;
      },
      getData (evt) {
      },
      drop (evt) {
      }
    }
  };
</script>
<style lang="scss">
  @import "../../../assets/css/variable";
  .sub-class-set {
    .card-content {
      background-color: #fff;
      padding: 0;
      display: block;
      .card-sub-title {
        font-size: px2rem(28px);
        color: #333;
        font-weight: bold;
        padding: px2rem(30px) px2rem(24px) 0 px2rem(24px);
      }
      .card-content-inner {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        padding: px2rem(30px) px2rem(24px) 0 px2rem(24px);
      }
    }
    .btn-del {
      position: absolute;
      right: px2rem(-16px);
      top: px2rem(-16px);
      font-size: px2rem(48px);
    }
    .sub-title {
      font-size: px2rem(28px);
      color: #999;
    }
    .pt20 {
      padding-top: px2rem(20px);
    }
    .account-child-btn {
      display: inline-block;
      position: relative;
      text-align: center;
    }
    input {
      text-align: right;
    }
    input:disabled {
      background: white;
      color: #999;
    }
    .icon-hearder-add{
      font-size: px2rem(28px);
    }
  }
</style>
